<!--
 * @Author: DUST
 * @Date: 2023-06-28 13:34:26
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-28 15:05:10
 * @FilePath: \vite-project\src\views\admin\components\addWebsiteModal.vue
 * @Description: 
 * undefined
-->
<template>
  <ant-modal
    :visible="visible"
    :type="type"
    :loading="loading"
    :width="1000"
    :title="title"
    @confirm="doConfirm"
    @cancel="cancel"
  >
    <a-form
      ref="formref"
      :model="formModel"
      class="ModalForm"
      :labelCol="{ span: 2 }"
      :wrapperCol="{ span: 20 }"
    >
      <a-form-item
        label="网站名称"
        :rules="[{ required: true, message: '网站名称不能为空' }]"
        name="name"
      >
        <a-input placeholder="请输入网站名称" v-model:value="formModel.name" />
      </a-form-item>
      <a-form-item
        label="网站类型"
        name="type"
        :rules="[{ required: true, message: '网站类型不能为空' }]"
      >
        <a-select
          v-model:value="formModel.type"
          style="width: 100%"
          placeholder="请选择网站类型"
        >
          <a-select-option
            :value="item.id"
            v-for="item of typeList"
            :key="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="网站地址"
        name="url"
        :rules="[{ required: true, message: '网站地址不能为空' }]"
      >
        <a-input
          placeholder="请输入网站地址"
          v-model:value="formModel.url"
          @change="getRich"
        />
      </a-form-item>
      <a-form-item
        label="网站logo"
        name="logoUrl"
        :rules="[{ required: true, message: '网站logo不能为空' }]"
      >
        <a-input
          placeholder="请输入网站logo"
          v-model:value="formModel.logoUrl"
        />
      </a-form-item>
      <a-form-item
        label="网站描述"
        name="description"
      >
        <a-input
          placeholder="请输入网站描述"
          v-model:value="formModel.description"
        />
      </a-form-item>
    </a-form>
  </ant-modal>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { modalType } from "../../../interface/enum";
import useForm from "@/utils/useForm";
import { getStrOrigin } from '@/utils';

const props = defineProps({
  width: {
    type: Number,
    default: () => 400,
  },
  visible: {
    type: Boolean,
    default: () => false,
  },
  loading: {
    type: Boolean,
    default: () => false,
  },
  type: {
    type: String,
    default: () => "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  typeList: {
    type: Array<{ id: number; name: string }>,
    default: () => [],
  },
});
const emit = defineEmits(["ok", "update:visible"]);

const title = ref<string>();
watch(
  () => props.type,
  () => {
    console.log(props.type);
    if (props.type == modalType.ADD) title.value = "新增";
    else if (props.type == modalType.EDIT) title.value = "编辑";
  },
  {
    deep: true,
    immediate: true,
  }
);

const formObj = reactive({
  name: undefined,
  url: undefined,
  logoUrl: undefined,
  description: undefined,
  type: undefined
});

const { formref, formModel } = useForm(formObj);

watch(
  () => props.data,
  () => {
    console.log(props.data);
    if (props.type == modalType.EDIT) {
      formModel.value = { ...formModel.value, ...props.data };
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
//修改网站地址
const getRich = function (value: string) {
  formModel.value.logoUrl = getStrOrigin(formModel.value.url) + "/favicon.ico"
};
const cancel = () => {
  emit("update:visible");
};
const doConfirm = () => {
  console.log("进入提交");
  formref.value.validate().then(() => {
    const obj = {
      ...formModel.value,
      type: Number(formModel.value.type)
    };
    console.log("要提交的数据：", obj);
    emit("ok", { type: props.type, obj });
  });
};
</script>
